{{/*
Copyright 2012 Takashi Yokoyama

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/}}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>クラウド帳簿</title>
	<link rel="stylesheet" href="style.css"></link>
	<link href="jquery-ui-1.8.18.custom.css" rel="stylesheet">
	<script src="//www.google.com/jsapi"></script>
	<script>
		google.load("jquery", "1.7");
		google.load("jqueryui", "1.8");
	</script>
	<script>
		$(function() {
			$("input").keypress(function(event) {
				if(!event) var event = window.event;
				if(event.keyCode == 13) {
					return false;
				}
			});
			
			$("input[type='number']").focusout(function(e) {
				var row = $(this).closest('tr').children('td');
				var balance = parseInt($(row[7]).children('#balance').text());
				var moneyin = parseInt($(row[3]).children('#moneysalesin').val()) + parseInt($(row[4]).children('#moneyin').val());
				var moneyout = parseInt($(row[5]).children('#moneysalesout').val()) + parseInt($(row[6]).children('#moneyout').val());
				var newbalance = balance - moneyout + moneyin;
				if(!isNaN(newbalance)) {
					$(row[7]).children('#balance').text(balance - moneyout + moneyin);
				}
			});

			// Chrome以外の場合のみDatePickerを表示する。
			var useragent = navigator.userAgent.toLowerCase();
			if(useragent.indexOf("chrome") == -1) {
				$("#cashdatepicker").datepicker({
					dateFormat: 'yy-mm-dd'
				});

				$("#bookdatepicker").datepicker({
					dateFormat: 'yy-mm-dd'
				});
			}

			$("#cashinputbtn").click(function (e) {
				var parameters = {date: $('#cashdatepicker').val(),
								  detail: $('#detail').val(),
								  type: $('#moneyType').val(),
								  moneysalesin: $('#moneysalesin').val(),
								  moneyin: $('#moneyin').val(),
								  moneysalesout: $('#moneysalesout').val(),
								  moneyout: $('#moneyout').val(),
								  balance: $('#balance').text()
								 };

				$.ajax({
					type: "POST",
					url: '/addcash',
					data: parameters,
					dataType: "json",
					success: function(data, status, xhr) {
						var content = $("<tr></tr>")
										.append("<td>" + $('#cashdatepicker').val() + "</td>")
										.append("<td>" + $('#detail').val() + "</td>")
										.append("<td>" + $('#moneyType').children(':selected').text() + "</td>")
										.append("<td>" + $('#moneysalesin').val() + "</td>")
										.append("<td>" + $('#moneyin').val() + "</td>")
										.append("<td>" + $('#moneysalesout').val() + "</td>")
										.append("<td>" + $('#moneyout').val() + "</td>")
										.append("<td>" + $('#balance').text() + "</td>")
										.append("<td><input type=\"button\" id=\"casheditbtn\" value=\"編集\" /><input type=\"hidden\" id=\"updatekey\" value=\"" + data.id + "\" /></td>");

						$('#cashdatepicker').val('');
						$('#detail').val('');
						$('#moneyType').val('');
						$('#moneysalesin').val('');
						$('#moneyin').val('');
						$('#moneysalesout').val('');
						$('#moneyout').val('');

						$('#panel1 .list tbody tr:last-child').before(content);
					},
					error: function(xhr, status, error) {
						alert("サーバへの登録でエラーが発生しました。もう一度登録して下さい。\n" + "[" +  xhr.status + "]");
					}
				});
			});

			// 現金出納帳の編集ボタンのイベント登録
			$('#casheditbtn').live(
				'click',
				function (e) {
					var obj = $(this).closest('tr');
					var inrow = $('#panel1 .list tr:last-child').clone();
					var inputChildren = $(inrow).children('td');
					$(inputChildren[0]).children('input').val($(obj).children('td')[0].innerText);

					var useragent = navigator.userAgent.toLowerCase();
					if(useragent.indexOf("chrome") == -1) {
						$(inputChildren[0]).children('input').datepicker({
							dateFormat: 'yy-mm-dd'
						});
					}
					$(inputChildren[1]).children('input').val($(obj).children('td')[1].innerText);

					// 勘定科目は登録の物を使い回すのでコピーしない。

					$(inputChildren[3]).children('input').val($(obj).children('td')[3].innerText);
					$(inputChildren[4]).children('input').val($(obj).children('td')[4].innerText);
					$(inputChildren[5]).children('input').val($(obj).children('td')[5].innerText);
					$(inputChildren[6]).children('input').val($(obj).children('td')[6].innerText);
					// 残高は入力しない。
					$(inputChildren)[7].innerText = $(obj).children('td')[7].innerText;
					var sendbutton = $(inrow).children('td:last-child').children('input:button')
					$(sendbutton).attr('value', '更新');
					$(sendbutton).bind('click', function (e) {
						var obj = $(this).closest('tr').children('td');
						var parameters = {id: $(obj[8]).children('input:hidden').val(),
										  date: $(obj[0]).children('#cashdatepicker').val(),
										  detail: $(obj[1]).children('#detail').val(),
										  type: $(obj[2]).children('#moneyType').val(),
										  moneysalesin: $(obj[3]).children('#moneysalesin').val(),
										  moneyin: $(obj[4]).children('#moneyin').val(),
										  moneysalesout: $(obj[5]).children('#moneysalesout').val(),
										  moneyout: $(obj[6]).children('#moneyout').val(),
										  balance: $(obj[7]).children('#balance').text()
										 };

						$.ajax({
							type: "POST",
							url: '/updatecash',
							data: parameters,
							dataType: "json",
							success: function(data, status, xhr) {
								var content = $("<tr></tr>")
												.append("<td>" + $(obj).children('#cashdatepicker').val() + "</td>")
												.append("<td>" + $(obj).children('#detail').val() + "</td>")
												.append("<td>" + $(obj).children('#moneyType').children(':selected').text() + "</td>")
												.append("<td>" + $(obj).children('#moneysalesin').val() + "</td>")
												.append("<td>" + $(obj).children('#moneyin').val() + "</td>")
												.append("<td>" + $(obj).children('#moneysalesout').val() + "</td>")
												.append("<td>" + $(obj).children('#moneyout').val() + "</td>")
												.append("<td>" + $(obj).children('#balance').text() + "</td>")
												.append("<td><input type=\"button\" id=\"casheditbtn\" value=\"編集\" /><input type=\"hidden\" id=\"updatekey\" value=\"" + data.id + "\" /></td>");
								$(obj).closest('tr').before(content);
								$(obj).remove();
							},
							error: function(xhr, status, error) {
								alert("サーバへの登録でエラーが発生しました。もう一度更新ボタンを押して下さい。\n" + "[" +  xhr.status + "]");
							}
						});
					});
					$(sendbutton).after('<input type="hidden" id="updatekey" value="' + $(obj).children('td:last-child').children('input:hidden').val() + '" />')
					obj.after(inrow);

					// 表示内容は削除
					$(obj).remove();
				});

			$('#bookinputbtn').click(function (e) {
				var parameters = {date: $('#panel2 #bookdatepicker').val(),
								  detail: $('#panel2 #detail').val(),
								  type: $('#panel2 #moneyType').val(),
								  moneysalesin: $('#panel2 #moneysalesin').val(),
								  moneyin: $('#panel2 #moneyin').val(),
								  moneysalesout: $('#panel2 #moneysalesout').val(),
								  moneyout: $('#panel2 #moneyout').val(),
								  balance: $('#panel2 #balance').text()
								 };

				$.ajax({
					type: "POST",
					url: '/addbook',
					data: parameters,
					dataType: "json",
					success: function(data, status, xhr) {
						var content = $("<tr></tr>")
										.append("<td>" + $('#panel2 #bookdatepicker').val() + "</td>")
										.append("<td>" + $('#panel2 #detail').val() + "</td>")
										.append("<td>" + $('#panel2 #moneyType').children(':selected').text() + "</td>")
										.append("<td>" + $('#panel2 #moneysalesin').val() + "</td>")
										.append("<td>" + $('#panel2 #moneyin').val() + "</td>")
										.append("<td>" + $('#panel2 #moneysalesout').val() + "</td>")
										.append("<td>" + $('#panel2 #moneyout').val() + "</td>")
										.append("<td>" + $('#panel2 #balance').text() + "</td>")
										.append("<td><input type=\"button\" id=\"bookeditbtn\" value=\"編集\" /><input type=\"hidden\" id=\"updatekey\" value=\"" + data.id + "\" /></td>");

						$('#panel2 #bookdatepicker').val('');
						$('#panel2 #detail').val('');
						$('#panel2 #moneyType').val('');
						$('#panel2 #moneysalesin').val('');
						$('#panel2 #moneyin').val('');
						$('#panel2 #moneysalesout').val('');
						$('#panel2 #moneyout').val('');

						$('#panel2 .list tbody tr:last-child').before(content);
					},
					error: function(xhr, status, error) {
						alert("サーバへの登録でエラーが発生しました。もう一度登録して下さい。\n" + "[" +  xhr.status + "]");
					}
				});
			});

			// 預金出納帳の編集ボタンのイベント登録
			$('#bookeditbtn').live(
				'click',
				function (e) {
					var obj = $(this).closest('tr');
					var inrow = $('#panel2 .list tr:last-child').clone();
					var inputChildren = $(inrow).children('td');
					$(inputChildren[0]).children('input').val($(obj).children('td')[0].innerText);
					var useragent = navigator.userAgent.toLowerCase();
					if(useragent.indexOf("chrome") == -1) {
						$(inputChildren[0]).children('input').datepicker({
							dateFormat: 'yy-mm-dd'
						});
					}
					$(inputChildren[1]).children('input').val($(obj).children('td')[1].innerText);

					// 勘定科目は登録の物を使い回すのでコピーしない。

					$(inputChildren[3]).children('input').val($(obj).children('td')[3].innerText);
					$(inputChildren[4]).children('input').val($(obj).children('td')[4].innerText);
					$(inputChildren[5]).children('input').val($(obj).children('td')[5].innerText);
					$(inputChildren[6]).children('input').val($(obj).children('td')[6].innerText);
					// 残高は入力しない。
					$(inputChildren)[7].innerText = $(obj).children('td')[7].innerText;
					var sendbutton = $(inrow).children('td:last-child').children('input:button')
					$(sendbutton).attr('value', '更新');
					$(sendbutton).bind('click', function (e) {
						var obj = $(this).closest('tr').children('td');
						var parameters = {id: $(obj[8]).children('input:hidden').val(),
										  date: $(obj[0]).children('#bookdatepicker').val(),
										  detail: $(obj[1]).children('#detail').val(),
										  type: $(obj[2]).children('#moneyType').val(),
										  moneysalesin: $(obj[3]).children('#moneysalesin').val(),
										  moneyin: $(obj[4]).children('#moneyin').val(),
										  moneysalesout: $(obj[5]).children('#moneysalesout').val(),
										  moneyout: $(obj[6]).children('#moneyout').val(),
										  balance: $(obj[7]).children('#balance').text()
										 };

						$.ajax({
							type: "POST",
							url: '/updatebook',
							data: parameters,
							dataType: "json",
							success: function(data, status, xhr) {
								var content = $("<tr></tr>")
												.append("<td>" + $(obj).children('#bookdatepicker').val() + "</td>")
												.append("<td>" + $(obj).children('#detail').val() + "</td>")
												.append("<td>" + $(obj).children('#moneyType').children(':selected').text() + "</td>")
												.append("<td>" + $(obj).children('#moneysalesin').val() + "</td>")
												.append("<td>" + $(obj).children('#moneyin').val() + "</td>")
												.append("<td>" + $(obj).children('#moneysalesout').val() + "</td>")
												.append("<td>" + $(obj).children('#moneyout').val() + "</td>")
												.append("<td>" + $(obj).children('#balance').text() + "</td>")
												.append("<td><input type=\"button\" id=\"bookeditbtn\" value=\"編集\" /><input type=\"hidden\" id=\"updatekey\" value=\"" + data.id + "\" /></td>");
								$(obj).closest('tr').before(content);
								$(obj).remove();
							},
							error: function(xhr, status, error) {
								alert("サーバへの登録でエラーが発生しました。もう一度更新ボタンを押して下さい。\n" + "[" +  xhr.status + "]");
							}
						});
					});
					$(sendbutton).after('<input type="hidden" id="updatekey" value="' + $(obj).children('td:last-child').children('input:hidden').val() + '" />')
					obj.after(inrow);

					// 表示内容は削除
					$(obj).remove();
				});

			$('#updatestartcash').click(function (e) {
				updateInitial();
			});

			$('#updatestartbook').click(function (e) {
				updateInitial();
			});

			$('#tabset').tabs('destroy');
			$('#tabset > ul').tabs();

			var options = {
				selected: 0
			};

			$('#tabset').tabs(options);
		});

		function updateInitial() {
			var parameters = {
				startcash: $('#startcash').val(),
				startbook: $('#startbook').val()
			};
			$.ajax({
				type: "POST",
				url: '/updateinitial',
				data: parameters,
				dataType: "json",
				success: function(data, status, xhr) {
					alert("前年からの繰越／元入金を更新しました。");
				},
				error: function(xhr, status, error) {
					alert("サーバへの登録でエラーが発生しました。もう一度更新ボタンを押して下さい。\n" + "[" +  xhr.status + "]");
				}
			});
		}
	</script>
</head>
<body>
	<nav>
		<ul>
			<li><a href="/typesetting">勘定科目設定</a></li>
		</ul>
	</nav>
	クラウド帳簿
	<article id="contents">
		<div id="tabset">
			<ul>
				<li><a href="#panel1">現金出納帳</a></li>
				<li><a href="#panel2">預金出納帳</a></li>
			</ul>
			<div id="panel1">
				<label for="startcash">前年からの繰越／元入金</label>
				<input type="number" id="startcash" value="{{.StartCash}}" />
				<input type="button" id="updatestartcash" value="更新" />
				<table class="list">
					<tr>
						<th class="date">登録日</th>
						<th>明細</th>
						<th>勘定科目</th>
						<th>現金売上</th>
						<th>その他入金</th>
						<th>現金仕入</th>
						<th>その他出金</th>
						<th>残高</th>
						<th>登録／編集</th>
					</tr>
					{{range .Cashes}}
					<tr>
						<td class="date">{{.Date}}</td>
						<td>{{.Detail}}</td>
						<td>{{.Type}}</td>
						<td class="number">{{.MoneySalesIn}}</td>
						<td class="number">{{.MoneyIn}}</td>
						<td class="number">{{.MoneySalesOut}}</td>
						<td class="number">{{.MoneyOut}}</td>
						<td class="number">{{.Balance}}</td>
						<td>
							<input type="button" id="casheditbtn" value="編集" />
							<input type="hidden" id="updatekey" value="{{.Id}}" />
						</td>
					</tr>
					{{end}}
					<tr>
						<td class="date"><input class="date" type="date" id="cashdatepicker" placeholder="yyyy-MM-dd" /></td>
						<td><input type="text" id="detail" /></td>
						<td>
							<select id="moneyType">
								{{range .Category}}
								<option value="{{.Id}}">{{.Name}}</option>
								{{end}}
							</select>
						</td>
						<td><input class="number" type="number" id="moneysalesin" /></td>
						<td><input class="number" type="number" id="moneyin" /></td>
						<td><input class="number" type="number" id="moneysalesout" /></td>
						<td><input class="number" type="number" id="moneyout" /></td>
						<td><div class="number" id="balance">{{.CurrentCashBalance}}</div></td>
						<td><input type="button" id="cashinputbtn" value="登録" /></td>
					</tr>
				</table>
			</div>
			<div id="panel2">
				<label for="startbook">前年からの繰越／元入金</label>
				<input type="number" id="startbook" value="{{.StartBook}}" />
				<input type="button" id="updatestartbook" value="更新" />
				<table class="list">
					<tr>
						<th class="date">登録日</th>
						<th>明細</th>
						<th>勘定科目</th>
						<th>預金売上</th>
						<th>その他入金</th>
						<th>預金仕入</th>
						<th>その他出金</th>
						<th>残高</th>
						<th>登録／編集</th>
					</tr>
					{{range .Books}}
					<tr>
						<td class="date">{{.Date}}</td>
						<td>{{.Detail}}</td>
						<td>{{.Type}}</td>
						<td class="number">{{.MoneySalesIn}}</td>
						<td class="number">{{.MoneyIn}}</td>
						<td class="number">{{.MoneySalesOut}}</td>
						<td class="number">{{.MoneyOut}}</td>
						<td class="number">{{.Balance}}</td>
						<td>
							<input type="button" id="bookeditbtn" value="編集" />
							<input type="hidden" id="updatekey" value="{{.Id}}" />
						</td>
					</tr>
					{{end}}
					<tr>
						<td class="date"><input class="date" type="date" id="bookdatepicker" placeholder="yyyy-MM-dd" /></td>
						<td><input type="text" id="detail" /></td>
						<td>
							<select id="moneyType">
								{{range .Category}}
								<option value="{{.Id}}">{{.Name}}</option>
								{{end}}
							</select>
						</td>
						<td><input class="number" type="number" id="moneysalesin" /></td>
						<td><input class="number" type="number" id="moneyin" /></td>
						<td><input class="number" type="number" id="moneysalesout" /></td>
						<td><input class="number" type="number" id="moneyout" /></td>
						<td><div class="number" id="balance">{{.CurrentBookBalance}}</div></td>
						<td><input type="button" id="bookinputbtn" value="登録" /></td>
					</tr>
				</table>
			</div>
		</div>
	</article>
</body>
</html>
